<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教学支持数据</title>
    <script src="js/echarts.js"></script>
    <style>
        #container{
            width: 1200px;
            height: 580px;
            margin: auto;
            background: #4393c;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    var my=echarts.init(document.querySelector("#container"))
    option = {
  title: {
    text: '9月 vs 10月',
    subtext: '教学支持数据'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['9月', '10月']
  },
  toolbox: {
    show: true,
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      // prettier-ignore
      data: ['张建','梁瑾','高颜领','王晓明','康凯','戚贤','王俊星','贾槐坚','申亚辉','薄浩丹']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '9月',
      type: 'bar',
      data: [
        106,132,106,56,102,190,117,130,166.5,120
      ],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: '10月',
      type: 'bar',
      data: [
        103,76,112,60,126,224,60,198,114,64
      ],
      markPoint: {
        data: [
          { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
          { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
        ]
      },
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    }
  ]
};
    my.setOption(option)
</script>
</body>
</html>